<template>
    <ul>
        <li :class="{ active: item.isCompleted }" v-for="(item,index) in props.arr" :key="item.id">
            <input type="checkbox" :checked="item.isCompleted" @change="checkChange(item, $event)">
            <span>
                {{ item.lists }}
            </span>
            <button class="btn" @click="del(index)">x</button>
        </li>
    </ul>

    <fieldset>
        <legend>详情</legend>
        <button @click="filter('all')">全部:{{allCount}}</button>
        <button @click="filter('completed')">已完成:{{completedCount}}</button>
        <button @click="filter('active')">未完成:{{activeCount}}</button>
    </fieldset>
</template>

<script setup>

import { defineProps, defineEmits,toRefs } from 'vue';
const props = defineProps(['arr', 'allCount', 'completedCount', 'activeCount'])

let { arr, allCount, completedCount, activeCount } = toRefs(props)
let emits = defineEmits(['del', 'getFlag'])

let del = (index) => {
    emits('del', index)
}

let checkChange = (item, e) => {
    console.log(e.target.checked);
    item.isCompleted = e.target.checked
}

let filter = flag => {
    emits('getFlag', flag)
}

</script>

<style scoped>
ul {
    position: relative;
    left: 114px;
    padding: 5px;
}

li {
    width: 300px;
    margin: 16px 0 16px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

li span {
    flex: 1;
}

.active {
    background-color: deeppink;
}

.btn {
    width: 30px;
    border: none;
    cursor: pointer;
    font-size: 24px;
}

fieldset {
    display: flex;
    justify-content: center;
    align-items: center;
}

button {
    margin: 5px;
    cursor: pointer;
}

input {
    margin: 6px;
    cursor: pointer;
}
</style>